<template>
  <div class="vc-page">
    <!-- 查询条件 -->
    <query-terms ref="queryTerms" :searchConfig="searchConfig"/>

    <!-- 操作按钮 -->
    <el-row class="vc-btns">
      <el-button
        v-for="btn in btns"
        :key="btn.key"
        :type="btn.type"
        size="small"
        class="multi-words"
        :disabled="selectedIds.length === 0"
        @click="changeIsRead(selectedIds, btn.key)">{{ btn.label }}</el-button>
    </el-row>

    <!-- 列表展示 -->
    <div class="vc-table">
      <tables
        v-model="tableConfig.tableData"
        :columns="tableConfig.columns"
        :stripe="true"
        @on-selection-change="handleSelectionChange"/>

      <el-pagination
        :current-page="currentPage"
        @current-change="handleCurrentChange"
        :page-size="GLOBAL.QUERY.PAGE_SIZE"
        :total="total"
        layout="total, prev, pager, next">
      </el-pagination>
    </div>

    <!-- 查看 -->
    <read-msg :entity="entity" :dialogVisible="readDialogVisible" @close="closeReadDialog"/>
  </div>
</template>

<script>
import ReadMsg from './read-msg'

export default {
  name: 'msg',
  components: { ReadMsg },
  data () {
    return {
      // 查询条件
      searchConfig: {
        items: [
          {
            key: 'title',
            title: '标题'
          },
          {
            key: 'type',
            title: '类型',
            type: 'select',
            placeholder: '请选择',
            groups: this.$store.state.dic.listFormat['xxlx']
          },
          {
            key: 'content',
            title: '内容'
          },
          {
            key: 'isRead',
            title: '读取状态',
            type: 'select',
            placeholder: '请选择',
            groups: this.$store.state.dic.listFormat['xxdqzt']
          },
          {
            key: 'createTime',
            title: '创建时间',
            type: 'daterange',
            startPlaceholder: '请选择',
            endPlaceholder: '请选择'
          }
        ],
        search: params => {
          this.search(params)
        },
        reset: () => {
          this.reset()
        },
        params: {}
      },
      searchData: {
        title: '',
        type: '',
        content: '',
        isRead: '',
        startTime: '',
        endTime: ''
      },
      // 按钮
      btns: [
        { label: '标记为已读', type: 'primary', key: '1' },
        { label: '标记为未读', key: '0' }
      ],
      // 列表
      tableConfig: {
        columns: [
          {
            type: 'selection'
          },
          {
            type: 'index'
          },
          {
            title: '标题',
            key: 'title'
          },
          {
            title: '类型',
            key: 'type',
            formatType: row => this.GLOBAL.formatter.formatTableCol(row.type, 'xxlx')
          },
          {
            title: '内容',
            key: 'content'
          },
          {
            title: '读取状态',
            key: 'isRead',
            formatType: row => this.GLOBAL.formatter.formatTableCol(row.isRead, 'xxdqzt')
          },
          {
            title: '创建时间',
            key: 'createTime',
            width: '170px',
            formatType: row => this.GLOBAL.formatter.formatDateTime(row.createTime, 'YYYY-MM-DD hh:mm:ss')
          },
          {
            type: 'option',
            minWidth: '86',
            items: [
              {
                title: '查看消息',
                icon: 'vc-icon vc-icon-table-check',
                click: row => {
                  this.readMsg(row)
                }
              }
            ]
          }
        ],
        tableData: []
      },
      currentPage: 1,
      total: 0,
      selectedIds: [],
      entity: {},
      readDialogVisible: false
    }
  },
  created () {
    this.findMsgByFuzzyPage()
  },
  methods: {
    /**
     * 加载列表数据
     */
    findMsgByFuzzyPage (pageNum = this.currentPage, pageSize = this.GLOBAL.QUERY.PAGE_SIZE, entity = this.searchData) {
      this.$api.findMsgByFuzzyPage({
        data: {
          pageNum: pageNum,
          pageSize: pageSize,
          params: entity
        }
      }).then(res => {
        if (!res.success || !res.data.total) {
          this.emptyTableData()
          return
        }
        if (!res.data.records || !res.data.records.length) {
          this.currentPage--
          this.findMsgByFuzzyPage()
          return
        }
        this.tableConfig.tableData = res.data.records
        this.total = res.data.total
        this.currentPage = res.data.current
      }).catch(() => {
        this.emptyTableData()
      })
    },
    /**
     * 清空表格数据
     */
    emptyTableData () {
      this.tableConfig.tableData = []
      this.total = 0
      this.currentPage = 1
    },
    /**
     * 点击页数
     */
    handleCurrentChange (val) {
      this.findMsgByFuzzyPage(val)
    },
    /**
     * 查询
     */
    search (params) {
      let list = params.createTime || []
      this.searchData = Object.assign(list.length ? {
        startTime: list[0],
        endTime: list[1] + 86399000
      } : {}, this.GLOBAL.filter.filterSpace(params), { createTime: '' })
      this.currentPage = 1
      this.findMsgByFuzzyPage()
    },
    /**
     * 重置
     */
    reset () {
      this.search(this.GLOBAL.object.clearValOfObj(this.searchData))
    },
    /**
     * 操作列-查看
     */
    readMsg (row) {
      this.entity = Object.assign({}, row)
      this.readDialogVisible = true
    },
    /**
     * '查看'弹出框关闭事件
     */
    closeReadDialog () {
      this.readDialogVisible = false
      this.changeIsRead([this.entity.id], '1', false)
    },
    /**
     * 复选框勾选
     */
    handleSelectionChange (val) {
      this.selectedIds = this.GLOBAL.array.selectOneKey(val, 'id')
    },
    /**
     * 修改读取状态
     */
    changeIsRead (ids, isRead, notify = true) {
      this.$api.modifyMsgReadByIds({
        data: {
          ids: ids,
          isRead: isRead
        }
      }).then(res => {
        this.findMsgByFuzzyPage()
        this.$bus.$emit('readMsg')
        notify && res.success && this.$notifyBox('标记成功', 'success')
      })
    }
  }
}
</script>
